// SPDX-License-Identifier: GPL-3.0-or-later
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import Fk
import Fk.Pages
import Fk.RoomElement

Item {
  property var choices: []
  property var all_choices: []
  property string prompt
  property string result

  id: root
  width: body.width
  height: body.height
  signal accepted()
  signal finished()

  function loadData(data) {
    [choices, all_choices, prompt] = data;
    roomScene.setPrompt(Util.processPrompt(prompt));
  }

  function close() {
    accepted();
    finished();
  }

  Row {
    id: body
    anchors.top: parent.bottom
    anchors.topMargin: parent.height+10 //5
    anchors.horizontalCenter: parent.horizontalCenter
    spacing: -50

    Repeater {
      model: all_choices

      Item { // 按钮组件
        id: main_item
        width: 60 + choice_tab.width
        height: 67
        scale: 0.6
        
        // Rectangle { // 一个矩形，定位用的
        //   anchors.fill: parent
        //   radius: 10
        //   color: "#3D2D1C"
        //   opacity: 0.8
        // }

        Image { // head|left part
          anchors.left: parent.left
          source: choice_tab.source
          sourceClipRect: Qt.rect(0, 0, 30, 67)
          height: choice_tab.height
          width: 30
        }

        Image { // main part
          id: choice_tab
          anchors.horizontalCenter: parent.horizontalCenter
          property bool enabled: choices.indexOf(modelData) !== -1
          source: {
            let state = enabled ? "normal": "disabled"
            return AppPath + "/packages/utility/qml/images/"+state+".png";
          }
          sourceClipRect: Qt.rect(54, 0, 54*2, 67)
          width: 32*Util.processPrompt(modelData).length;
          height: 67

          Text {
            id: choice_text
            text: Util.processPrompt(modelData)
            anchors.centerIn: parent
            font.family: fontLibian.name
            font.pixelSize: 32
            style: Text.Outline
            styleColor: "#3D2D1C"
            color: "#E5C35D"
            wrapMode: Text.WrapAnywhere
          }
        }
        
        Image { // tail|right part
          anchors.right: parent.right
          source: choice_tab.source
          sourceClipRect: Qt.rect(212-30, 0, 30, 67)
          height: choice_tab.height
          width: 30
        }

        TapHandler {
          acceptedButtons: Qt.LeftButton | Qt.NoButton
          onTapped: (p, btn) => {
            if (choice_tab.enabled) {
              close();
              roomScene.state = "notactive";
              ClientInstance.replyToServer("", modelData);
            }
          }
        }
      }
    }
  }
}
